色

チャート オプションに色を指定する場合、さまざまな形式を使用できます。色は、16 進数、RGB、または HSL 表記の文字列として指定できます。色が必要であるが指定されていない場合、Chart.js はグローバルのデフォルト色を使用します。この色は次の場所に保存されていますChart.defaults.global.defaultColor。初期設定では、'rgba(0, 0, 0, 0.1)'。

を渡すこともできますキャンバスグラデーション物体。チャートに渡す前にこれを作成する必要がありますが、これを使用すると、いくつかの興味深い効果を得ることができます。

パターンとグラデーション

別のオプションは、キャンバスパターンまたキャンバスグラデーション文字列の色の代わりにオブジェクトを使用します。

たとえば、画像のパターンでデータセットを埋めたい場合は、次のように実行できます。

var img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    var chart = new Chart(ctx, {
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    });
};

データ グラフィックスにパターン塗りつぶしを使用すると、視覚障害 (色覚異常や部分視力など) を持つ視聴者が次のことを行うのに役立ちます。データをより簡単に理解する。

の使用パターン異常ライブラリを使用すると、データセットを埋めるパターンを生成できます。

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56')
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};